<template>
  <div>
    <!-- 头部 -->
    <div class="search">
      <a-form style="padding-top: 20px" :model="form" :hideRequiredMark="true" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row>
          <a-col :span="4" :offset="1" :lg="4" :xs="10" :md="4">
            <a-form-item name="saleValue" label="">
              <a-select ref="select" v-model:value="form.appType" placeholder="请选择">
                <a-select-option v-for="item in buyCar2" :value="item.id" :key="item.id">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="4" :offset="1" :lg="4" :xs="10" :md="4">
            <a-form-item name="keyword" label="">
              <a-input v-model:value="form.keyword" placeholder="请输入搜索内容"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="2" :offset="1"><a-button type="primary" @click="search" class="d-a-center">搜索</a-button></a-col>
        </a-row>
      </a-form>
    </div>
    <a-button type="primary" @click="look(0, 0)" class="d-a-center" style="margin-bottom: 1%">新增内容</a-button>
    <!-- 列表 -->
    <a-table
      :columns="columns"
      :data-source="list"
      bordered
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
      :scroll="{ y: 540, x: 'auto' }"
    >
      <template #operation="{ record }">
        <a-button type="link" v-has="{ a: $route, b: 1 }" @click="look(record.id, 1)">编辑</a-button
        ><a-button type="link" v-has="{ a: $route, b: 1 }" @click="deleteInfo(record.id)">删除</a-button>
      </template>
    </a-table>
    <!-- 新增和编辑-->
    <a-modal :destroyOnClose="true" v-model:visible="visible" title="自动回复" @ok="handleOk" ok-text="保存" :closable="true">
      <a-form ref="questionRef" :model="questionForm" :rules="rules"
        ><a-form-item name="saleValue" label="">
          <a-select ref="select" v-model:value="questionForm.appType" placeholder="请选择">
            <a-select-option v-for="item in buyCar2" :value="item.id" :key="item.id">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="问题内容" name="title">
          <a-textarea v-model:value="questionForm.title" :rows="5"></a-textarea>
        </a-form-item>
        <a-form-item label="回答内容" name="content">
          <a-textarea v-model:value="questionForm.content" :rows="5"></a-textarea>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import { reactive, ref, watch, computed, defineComponent, createVNode, toRefs } from 'vue'
import { CheckOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { Modal, notification, message } from 'ant-design-vue'
import { deleteObjBlank } from '@/assets/js/common.js'
import {
  getAllQuestionTemplates,
  createQuestionTemplate,
  deleteQuestionTemplate,
  updateQuestionTemplate,
  getQuestionTemplateById
} from '@/api/chat/index'
export default {
  setup() {
    const form = reactive({
      appType: 1
    })
    const questionRef = ref('')
    const questionForm = reactive({
      appType: 1,
      title: '',
      content: '',
      priority: 0,
      clickCount: 0,
      isDele: 0
    })

    const rules = {
      title: [
        {
          required: true,
          message: '请填写问题!',
          trigger: 'blur'
        }
      ],
      content: [
        {
          required: true,
          message: '请填写回答内容!',
          trigger: 'blur'
        }
      ]
    }
    const data = reactive({
      loading: true,
      list: [],
      detailList: [],
      detail: {
        realName: '',
        payeeAccount: '',
        nurseId: ''
      },
      time: [],
      id: '', //提现详情ID
      number: '', //订单编号
      obj: {}, //提现详情
      isEdit: 0,
      visible: false,
      statusAct: 0,
      rejectVisible: false,
      buyCar2: [
        {
          name: '护士端',
          id: 1
        },
        {
          name: '用户端',
          id: 2
        }
      ]
    })
    // 分页器
    const page = reactive({
      page: 1,
      pageSize: 10,
      total: 0
    })
    // 查询
    const search = () => {
      if (Object.keys(form).length == 0) {
        message.warning('请输入你要搜索的内容！！！')
        return
      }
      page.page = 1
      init()
    }
    const columns = [
      {
        title: '问题',
        dataIndex: 'title',
        className: 'table',
        align: 'center'
      },
      {
        title: '答案',
        dataIndex: 'content',
        className: 'table',
        align: 'center'
      },
      {
        title: '操作',
        dataIndex: 'operation',
        className: 'table',
        align: 'center',
        fixed: 'right',
        slots: {
          customRender: 'operation'
        }
      }
    ]

    // 分页器
    const pagination = computed(() => ({
      current: page.page,
      pageSize: page.pageSize,
      pageSizeOptions: ['10', '20', '30'],
      showTotal: (total, range) => {
        return '共' + total + '条'
      },
      total: page.total,
      showQuickJumper: true,
      showSizeChanger: true
    }))

    // 分页器改变的时候
    const handleTableChange = (pagination, filters, sorter) => {
      console.log(pagination, '当前分页')
      page.page = pagination.page
      page.pageSize = pagination.pageSize
      // 请求列表接口
      init()
    }
    // 查看
    const look = async (id, value) => {
      data.visible = true
      // 0是新增，其他是编辑
      data.id = id
      console.log(id)
      if (id == 0) {
        questionForm.appType = 1
        questionForm.title = ''
        questionForm.content = ''
        console.log(1111111111, questionForm.value)
      } else {
        let res = await getQuestionTemplateById(id)
        if (res.success) {
          let info = res.object
          questionForm.appType = info.appType
          questionForm.title = info.title
          questionForm.content = info.content
        }
      }
    }
    const handleOk = async () => {
      if (data.id == 0) {
        let res = await createQuestionTemplate(questionForm)
        if (res.object.success) {
          data.visible = false
          message.success('添加成功')
          init()
        } else {
          message.error('添加失败，' + res.object.object)
        }
      } else {
        console.log(data.id, questionForm)
        let res = await updateQuestionTemplate(data.id, questionForm)
        if (res.object.success) {
          data.visible = false
          message.success('编辑成功')
          init()
        } else {
          message.error('编辑失败，' + res.object.object)
        }
      }
    }
    const deleteInfo = async id => {
      let res = await deleteQuestionTemplate(id)
      if (res.success) {
        message.success('删除成功')
        init()
      }
    }
    init()
    async function init() {
      data.loading = true
      let res = await getAllQuestionTemplates(page.page, page.pageSize, form.appType, form.keyword)
      if (res.success) {
        data.list = res.object
        data.loading = false
      }
    }
    return {
      ...toRefs(data),
      form,
      columns,
      pagination,
      handleTableChange,
      search,
      look,
      labelCol: {
        style: {
          fontWeight: 'bolder'
        }
      },
      handleOk,
      deleteInfo,
      rules,
      questionRef,
      questionForm
    }
  },

  components: {
    CheckOutlined,
    EditOutlined,
    ExclamationCircleOutlined
  }
}
</script>

<style scoped lang="less">
.search {
  background-color: #e6e6e6;
  padding-left: 20px;
  margin-bottom: 20px;
}

.action-nav {
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding-bottom: 15px;
}
</style>
